<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%String hashId = request.getParameter("gameId");String eth = request.getParameter("stake");%>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/blockChian.css" rel="stylesheet">

<div id="gameView" class="row ">
	<div class=" col-md-1 col-lg-1">&nbsp;</div>
	<div class="container col-xs-12 col-sm-12 col-md-10 col-lg-10 " style="z-index: 2;">
		<div class="bc_flex_center_center ">
			<img class="bc_game_img" src="images/70_icon.png" />
			<img class="bc_game_img" src="images/72_icon.png" />
			<img class="bc_game_img" src="images/73_icon.png" />
		</div>

		<div class="bc_flex_center_center">
			<div class="">游戏ID:
				<addr id="gameAddr" ondblclick="GameView.copy.click(this);">
					<%=hashId%>
				</addr>
			</div>
		</div>

		<table class="col-md-12 col-lg-12  col-xs-12 col-sm-12 gameTable" style="text-align: center;align-content: center;">
			<tr class="headTr">
				<td class="bc_flex_center_end" style="height: 160px;">
					<div class=" bc_flex_center_center img-circle" style="margin-right:40px">
						我
					</div>
				</td>
				<td class="bc_center eth" style="text-decoration: none;width: 200px;">
					WEI
				</td>
				<td class="bc_flex_center_start">
					<div class=" bc_flex_center_center img-circle" style="margin-left: 40px;">
						TA
					</div>
				</td>
			</tr>
			<style>
				table{
					table-layout: fixed;
				}
				
				table td .img-circle {
					width: 80px;
					height: 80px;
					background-color: #4285f4;
					font-size: 3rem;
				}
				
				.bc_center .timeout {
					width: 80%;
					font-size: 2rem;
					color: red;
					text-decoration: none;
					margin-left: 10%;
					border-bottom: 1px solid white;
					margin-bottom: 5rem;
				}
				.bc_center .timeout x{
					font-size: 4rem;
				}
				
				table.gameTable tr.infotr {
					height: 120px;
				}
				
				.mianBan {
					height: 80px;
					width: 160px;
					border-radius: 5px;
				}
				
				.mianBan.active {
					background-color: darkgray !important;
					color: white !important;
					border-radius: 5px;
				}
				
				.mianBan.able {
					background-color: yellow;
				}
				
				.mianBan.able:hover {
					background-color: greenyellow;
					cursor: pointer;
				}
				
				.resultImg {
					width: 30px;
					height: 30px;
					margin: 1rem;
				}
			</style>
			<script id="gameTmp" type="text/html">
				<tr class="chuquantr infotr">
					<td class="bc_flex_center_end">
						<div class="mianBan bc_flex_center_center  btn-default  {{if state == 2  && blindedBid1 == 0  }} able  {{else }} active{{/if}}" onclick="chuquan.click(this);" id="chuquan">
							{{if blindedBid1 == 0}}1.出拳{{else }}已出拳 {{/if}}
						</div>
					</td>
					<td class="bc_center">
						<div class="timeout">剩余&nbsp;
							<x>{{if state == 2}}{{wstimeout}}{{else}}0{{/if}}</x>&nbsp;s
						</div>
					</td>
					<td class="bc_flex_center_start ">
						<div class="mianBan bc_flex_center_center  btn-default  active">
							{{if blindedBid2 == 0}}未出拳 {{else }}已出拳 {{/if}}
						</div>
					</td>

				</tr>

				<tr class="kaiquantr infotr">
					<td class="bc_flex_center_end">
						<div class="mianBan bc_flex_center_center btn-default  {{if  state == 3  && choice1 == 0 }} able {{else }} active {{/if}}" id="kaiquan" onclick="kaiquan.click(this);">
							{{if choice1 == 0}}2.开拳 {{else }}已开拳 {{/if}}
						</div>
					</td>

					<td class="bc_center">
						<div class="timeout">剩余&nbsp;
							<x>{{if state == 3}}{{wstimeout}}{{else}}0{{/if}}</x>&nbsp;s</div>
					</td>

					<td class="bc_flex_center_start kaiquanTip">
						<div class="mianBan bc_flex_center_center btn-default active">
							{{if choice2 != 0 }} 已开拳 {{else}} 未开拳 {{/if}}
						</div>
					</td>
				</tr>
				<tr class="jiesuantr infotr" {{if state < 5}}style="display: none;" {{/if}}>
					<td class="bc_flex_center_end" style="height: 100px;">
						<div style="font-size: 4rem;">
							{{if winner == 0 }} 平局 {{else if winner == 1}}  YOU WON {{else}} YOU LOST {{/if}}
						</div>
						<img src="images/{{choice1}}_icon.png" class="resultImg" />
					</td>
					<td class="bc_center">
					</td>
					<td class="bc_flex_center_start">
						<img src="images/{{choice2}}_icon.png" class="resultImg" />
						<div style="font-size: 4rem;">
							{{if winner == 0}} 平局 {{else if winner == 2}} YOU WON {{else}} YOU LOST {{/if}}
						</div>

					</td>
				</tr>
			</script>

		</table>
	</div>

	<div class=" col-md-1 col-lg-1">&nbsp;</div>
	<script src="js/tool/art-template.js"></script>
	<script src="js/bc/gameview/jiesuan.js"></script>
	<script src="js/bc/gameview/kaiquan.js"></script>
	<script src="js/bc/gameview/chuquan.js"></script>
	<script src="js/bc/game.js"></script>

</div>